<!DOCTYPE html>
<html>
<head>
  <!-- <script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script> -->
  <script src="https://unpkg.com/ag-grid-enterprise/dist/ag-grid-enterprise.min.noStyle.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css">
  <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-balham.css">
</head>
<body>
  <h1>Hello from ag-grid!</h1>
  <button onclick="getSelectedRows()">Get Selected Rows</button>
  <div id="myGrid" style="height:800px;with:1000px" class="ag-theme-balham"></div>

  <script type="text/javascript" charset="utf-8">
    // specify the columns
    var columnDefs = [
      {headerName: "Make", field: "make",sortable:true, filter:true /**, checkboxSelection: true **/,rowGroup:true},
      //{headerName: "Model", field: "model",sortable:true, filter:true},
      {headerName: "Price", field: "price",sortable:true, filter:true}
    ];
	
    var autoGroupColumnDef = {
		headerName: "Model", 
		field: "model", 
		cellRenderer:'agGroupCellRenderer',
		cellRendererParams: {
			checkbox: true,
			filter:false
		}
	}
    // specify the data
    var rowData = [
      {make: "Toyota", model: "Celica", price: 35000},
      {make: "Ford", model: "Mondeo", price: 32000},
      {make: "Porsche", model: "Boxter", price: 72000}
    ];
    
    // let the grid know which columns and what data to use
    var gridOptions = {
		columnDefs: columnDefs,
		//rowData: rowData
		autoGroupColumnDef: autoGroupColumnDef,
		groupSelectsChildren: true,
		rowSelection: 'multiple',
		 floatingFilter: true
    };

  // lookup the container we want the Grid to use
  var eGridDiv = document.querySelector('#myGrid');
try{
  // create the grid passing in the div to use together with the columns & data we want to use
  new agGrid.Grid(eGridDiv, gridOptions);
  }
  catch(e){
	console.log(e);
  }
  // 获取远程数据
  fetch('https://api.myjson.com/bins/15psn9').then(
	function(reponse){
		return reponse.json();
	}).then(function(data){
		gridOptions.api.setRowData(data);
	});
  
  function getSelectedRows(){
	var selectedNodes=gridOptions.api.getSelectedRows();
	// var selectedData=selectedNodes.map(function(node){return node.data});
	var selectedDataStringPresentation=selectedNodes.map(function(node){
		return node.make+' '+node.model;
	}).join(',');
	
	alert('selected nodes:'+selectedDataStringPresentation);
  }
  </script>
</body>
</html>